<template>
  <div class="container mx-auto py-8">
    <div class="flex gap-8">
      <!-- 左侧产品图片 -->
      <div class="w-1/6">
        <div class="sticky top-4">
          <div class="bg-white rounded-lg shadow-md p-4">
            <!-- 主图 -->
            <div class="mb-4">
              <img 
                src="@/assets/img/c4a191e9818713e771719a02cd71f477.jpg" 
                :alt="product.name"
                class="w-full h-auto rounded-lg"
              >
            </div>
            <!-- 缩略图列表 -->
            <!-- <div class="grid grid-cols-4 gap-2">
              <div 
                v-for="(image, index) in product.images" 
                :key="index"
                @click="selectedImage = image"
                class="cursor-pointer rounded-md overflow-hidden border-2 transition-all"
                :class="selectedImage === image ? 'border-primary' : 'border-transparent'"
              >
                <img 
                  :src="image" 
                  :alt="`${product.name}-${index}`"
                  class="w-full h-full object-cover"
                >
              </div>
            </div> -->
          </div>
        </div>
      </div>

      <!-- 中间产品信息 -->
      <div class="w-3/6">
        <h1 class="text-2xl font-bold mb-4">{{ product.name }}</h1>
        <div class="space-y-6">
          <!-- 价格信息 -->
          <!-- <div class="bg-gray-50 p-4 rounded-lg">
            <div class="text-3xl text-primary font-bold">
              ¥{{ product.price }}
            </div>
            <div class="text-gray-500 text-sm mt-1">
              市场参考价：<del>¥{{ product.originalPrice }}</del>
            </div>
          </div> -->

          <!-- 基本信息 -->
          <div class="space-y-4">
            <div class="flex items-center text-gray-600">
              <span class="">Manufacturer：</span>
              <span>{{ product.brand }}</span>
            </div>
            <div class="flex items-center text-gray-600">
              <span class="">Datasheet：</span>
              <a class="text-blue-400 underline cursor-pointer" @click="handlePdf">{{ product.datasheet }}</a>
            </div>
            <div class="flex items-center text-gray-600">
              <span class="">Selling Point：{{ product.SellingPoint }}</span>
            </div>
            <!-- <div class="flex items-center text-gray-600">
              <span class="w-20">库存：</span>
              <span>{{ product.stock }} 件</span>
            </div> -->
          </div>

          <!-- 产品描述 -->
          <!-- <div class="space-y-2">
            <h2 class="text-lg font-medium">产品描述</h2>
            <p class="text-gray-600 leading-relaxed">
              {{ product.description }}
            </p>
          </div> -->

        </div>
      </div>

      <!-- 右侧订单卡片 -->
      <div class="w-2/6">
        <div class="sticky top-4">
          <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-lg font-medium mb-4 mb-0">Request Quote</h2>
            <p class="text-xs text-slate-400 mb-4">Please send RFQ , your dedicated sales manager will respond immediately</p>
            <!-- 订单表单 -->
            <form @submit.prevent="handleSubmit" class="space-y-4 ">

              <!-- 联系信息 -->
              <div class="flex gap-4">
                <div class="w-1/2">
                  <label class="block text-sm font-medium text-gray-700 mb-1">
                    Contact Name
                  </label>
                  <input 
                    type="text"
                    v-model="orderInfo.contact"
                    class="w-full px-3 py-2 border rounded-md focus:ring-primary focus:border-primary"
                    placeholder="Please input contact name"
                  >
                </div>
                <div class="w-1/2">
                <label class="block text-sm font-medium text-gray-700 mb-1">
                  Business Email
                </label>
                <input 
                  type="text"
                  v-model="orderInfo.email"
                  class="w-full px-3 py-2 border rounded-md focus:ring-primary focus:border-primary"
                  placeholder="Please input business email"
                >
              </div>
              </div>
              <div class="flex gap-4">
                <div class="w-1/2">
                  <label class="block text-sm font-medium text-gray-700 mb-1">
                    Company Name
                  </label>
                  <input 
                    type="text"
                    v-model="orderInfo.company"
                    class="w-full px-3 py-2 border rounded-md focus:ring-primary focus:border-primary"
                    placeholder="Please input company name"
                  >
                </div>
                <div class="w-1/2">
                  <label class="block text-sm font-medium text-gray-700 mb-1">
                    Country
                  </label>
                  <input 
                    type="text"
                    v-model="orderInfo.country"
                    class="w-full px-3 py-2 border rounded-md focus:ring-primary focus:border-primary"
                    placeholder="Please input country"
                  >
                </div>
              </div>
              
              <div class="flex gap-4">
                <div class="w-1/3">
                  <label class="block text-sm font-medium text-gray-700 mb-1">
                    Quantity
                  </label>
                  <input 
                    type="number"
                    v-model="orderInfo.quality"
                    class="w-full px-3 py-2 border rounded-md focus:ring-primary focus:border-primary"
                    placeholder=""
                  >
                </div>
                <div class="w-2/3 flex gap-4 items-end">
                  <!-- 提交按钮 -->
                  <button 
                    type="submit"
                    class="text-sm w-1/2 bg-primary text-white py-3 rounded-md hover:bg-opacity-90 transition-colors"
                  >
                    Quick RFQ
                  </button>
                  <button 
                    type="submit"
                    class="text-sm w-1/2 bg-white text-primary border border-solid border-blue-300 py-3 rounded-md hover:bg-opacity-90 transition-colors"
                  >
                    Add to RFQ list
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- 技术参数 -->
    <div class="space-y-2  border-t border-solid border-inherit mt-8 pt-8">
      <h2 class="text-lg font-medium">Specifications</h2>
      <div class="bg-white rounded-lg border">
        <div 
          v-for="(spec, index) in product.specifications" 
          :key="index"
          class="flex border-b last:border-b-0"
        >
          <div class="w-1/3 p-3 bg-gray-50">{{ spec.name }}</div>
          <div class="w-2/3 p-3">{{ spec.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 模拟产品数据
const product = ref({
  id: 1,
  name: 'STM32F103C8T6',
  price: 12.80,
  originalPrice: 15.00,
  model: 'STM32F103C8T6',
  brand: 'ST',
  stock: 999,
  description: 'STM32F103C8T6是意法半导体推出的ARM Cortex-M3内核微控制器，主频72MHz，64KB Flash，20KB SRAM，支持SWD和JTAG调试。',
  datasheet: 'ICL4891JIM48561',
  images: [
    '/images/stm32-1.jpg',
    '/images/stm32-2.jpg',
    '/images/stm32-3.jpg',
    '/images/stm32-4.jpg'
  ],
  SellingPoint: 'Compression Fittings Have A Single Sleeve Which Bites into Tubing As You TightenThe Nut To Create A Strong Seal. Zinc-Plated Steel ls Strong And Has Fair Corrosion Resistance.',
  specifications: [
    { name: '内核', value: 'ARM Cortex-M3' },
    { name: '主频', value: '72MHz' },
    { name: 'Flash', value: '64KB' },
    { name: 'SRAM', value: '20KB' },
    { name: '工作电压', value: '2.0V - 3.6V' },
    { name: 'GPIO', value: '37个可重映射IO口' }
  ]
})

// 当前选中的图片
const selectedImage = ref(product.value.images[0])


// 订单信息
const orderInfo = ref({
  contact: '',
  email: '',
  company: '',
  country: '',
  quality: 1,
})

// 提交订单
const handleSubmit = () => {
  console.log('提交订单', {
    product: product.value.id,
    ...orderInfo.value
  })
}

// 查看pdf
const handlePdf = () => {
  window.open(`/product/file`, '_blank')
}

</script>